<template>
	<view class="home">
		<view class="content">
			<view class="item" v-for="item in listArr" :key="item._id" @click="goDetail(item._id)">
				<view class="text">
					<view class="title">
						{{item.title}}
					</view>
					<view class="info">
						<text>{{item.author}}</text>
						<text>
							<uni-dateformat :date="item.posttime" format="MM-dd" :threshold="[60000, 3600000]" />
						</text>
					</view>
				</view>
				<view class="pic">
					<image v-if="item.picUrls && item.picUrls.length" :src="item.picUrls[0]" mode="aspectFill">
						<image v-else src="../../static/images/nopic.jpg" mode="aspectFill">

						</image>
				</view>
			</view>
		</view>
		<view class="goAdd" @click="goAdd">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: [],
				currentPage: 1,
				num: 8,
				isFinish: false
			}
		},
		onLoad() {
			this.getData()
		},
		// 触底调用
		onReachBottom() {
			if (this.isFinish) return
			this.currentPage++
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.listArr = []
			this.currentPage = 1
			this.isFinish = false
			this.getData(true)
		},
		methods: {
			// 获取数据库的列表
			async getData(refresh) {
				const {
					result
				} = await uniCloud.callFunction({
					name: 'art_get_all',
					data: {
						num: this.num,
						page: this.currentPage
					}
				})
				if (refresh) uni.stopPullDownRefresh()

				if (result.affectedDocs === 0) {
					this.isFinish = true
					return
				}
				this.listArr = [...this.listArr, ...result.data]
			},
			// 点击跳转到新增页面
			goAdd() {
				uni.navigateTo({
					url: '/pages/add/add'
				})
			},
			// 跳转到详情页
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.content {
			padding: 30rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;

				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right: 20rpx;

					.title {
						font-size: 44rpx;
						color: #333;
						text-align: justify;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						//两行文字溢出显示省略号
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.info {
						font-size: 28rpx;
						color: #888;

						text {
							margin-right: 20rpx;
						}
					}
				}

				.pic {
					width: 260rpx;
					height: 180rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.goAdd {
			position: fixed;
			right: 60rpx;
			bottom: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			background-color: #2b9939;
			font-size: 50rpx;
			color: #fff;
			border-radius: 50%;
			box-shadow: 0 0 20rpx rgba(43, 153, 57, .7);
		}
	}
</style>